<template>
    <div class="categories">
        <h2>商品分类</h2>
        <div class="category-grid">
            <div class="category" v-for="c in ['家电', '数码', '服饰', '食品']" :key="c">{{ c }}</div>
        </div>
    </div>
</template>

<style scoped>
.categories {
    padding: 20px;
    background: #f9f9f9;
}

.category-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.category {
    padding: 10px 20px;
    background-color: #42b983;
    color: white;
    border-radius: 20px;
    margin: 5px;
}
</style>
